<script setup>
// 编程式跳转-行为中使用：js跳转
// 1. 从vue-router身上引入useRouter辅助函数
import { RouterLink, RouterView, useRouter } from 'vue-router';
// 2. 通过辅助函数创建router对象
const router = useRouter();
function goTo(to){
  // 3. 执行router对象身上的跳转方法，完成跳转
  router.push(to);
  // router.replace(to);

  // 路由的多种写法
  // 字符形式
  // router.push(to);
  // 对象形式
  // router.push({name: "abc"});
}
</script>

<template>
  <header>
    <div class="wrapper">
      <input type="button" value="后退" @click=" $router.go(-1) ">
      <input type="button" value="前进" @click=" $router.go(1) ">
      <input type="button" value="刷新" @click=" $router.go(0) ">
      <nav>
        <!-- 声明式跳转：router-link标签跳转 -->
        <!-- <RouterLink to="/">商品列表</RouterLink> | 
        <RouterLink to="/cart">购物车</RouterLink> | 
        <RouterLink to="/expose">父子组件</RouterLink> -->
        <!-- 编程式跳转-模板直接使用：js跳转 -->
        <!-- <input type="button" value="商品列表" @click=" $router.push('/') ">
        <input type="button" value="购物车" @click=" $router.push('/cart') ">
        <input type="button" value="父子组件" @click=" $router.push('/expose') "> -->
        <!-- 编程式跳转-行为中使用：js跳转 -->
        <input type="button" value="商品列表" @click="goTo('/')">
        <input type="button" value="购物车" @click="goTo('/cart')">
        <input type="button" value="父子组件" @click="goTo('/expose')">
        <input type="button" value="商品列表-演示" @click="goTo('/goods')">
      </nav>
    </div>
  </header>
  <Suspense>
    <RouterView />
  </Suspense>
</template>

<style scoped>
.router-link-active,.router-link-exact-active{
  text-decoration: underline;
}
</style>
